<template>
  <el-form
    ref="ruleFormRef"
    :model="pwdForm"
    :rules="rules"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item prop="userAccount" class="login-animation1">
      <el-input v-model="pwdForm.userAccount" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item prop="smsCode" class="login-animation2">
      <el-input
        v-model="pwdForm.smsCode"
        placeholder="请输入验证码"
        style="width: 75%"
      />
      <el-button
        type="primary"
        style="width: 25%"
        @click="getCode"
        :disabled="!getCodeFlag"
        >{{ getCodeFlag ? '获取验证码' : '已发送(' + codeNum + ')' }}</el-button
      >
    </el-form-item>
    <el-form-item prop="userPwd" class="login-animation3">
      <el-input
        v-model="pwdForm.userPwd"
        autocomplete="new-password"
        placeholder="请输入新密码"
        show-password
      />
    </el-form-item>
    <el-form-item prop="userPwdTow" class="login-animation4">
      <el-input
        v-model="pwdForm.userPwdTow"
        placeholder="请确认新密码"
        show-password
      />
    </el-form-item>
    <el-form-item class="login-animation5">
      <el-button
        type="primary"
        @click="submitForm(ruleFormRef)"
        style="width: 100%"
      >
        确定
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { forgetPwd, sendSmsCode } from '/@/api/login'
import { Md5 } from 'ts-md5/dist/md5'
const emit = defineEmits(['pwd'])
const props = defineProps({
  userAccount: String as any
})
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const pwdForm = reactive({
  userAccount: '',
  smsCode: '',
  userPwd: '',
  userPwdTow: ''
})

const validatePhone = (rule: any, value: any, callback: any) => {
  const reg = /^[1][3-9][0-9]{9}$/
  if (!reg.test(value) && value != '') {
    callback(new Error('请输入正确的手机号码'))
  } else {
    callback()
  }
}
const validatePwd = (rule: any, value: any, callback: any) => {
  var passwordreg2 =
    /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&*-+=?'".,/_`~<>()|:;\.*]{6,16}$/
  if (!passwordreg2.test(value)) {
    callback(new Error('请输入由字母/数字/字符组成的6-16位密码'))
  } else {
    callback()
  }
}
const validateNewPwd = (rule: any, value: any, callback: any) => {
  if (pwdForm.userPwdTow != pwdForm.userPwd) {
    callback(new Error('与新密码不一致'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  userAccount: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ],
  smsCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  userPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { required: true, validator: validatePwd, trigger: 'blur' }
  ],
  userPwdTow: [{ validator: validateNewPwd, trigger: 'blur' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let params = {
        userAccount: pwdForm.userAccount,
        smsCode: pwdForm.smsCode,
        userPwd: Md5.hashStr(pwdForm.userPwd),
        userPwdTow: Md5.hashStr(pwdForm.userPwdTow)
      }
      let res = await forgetPwd(params)
      if (res.code == 0) {
        ElMessage.success('密码修改成功')
        emit('pwd', pwdForm.userAccount)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const getCodeFlag = ref(true)
const codeNum = ref(60)
const timer = ref<any>(null)
const getCode = async () => {
  let res = await sendSmsCode({ userAccount: pwdForm.userAccount })
  if (res.code == 0) {
    ElMessage.success('已发送')
    getCodeFlag.value = false
    timer.value = setInterval(() => {
      if (codeNum.value > 0) {
        codeNum.value--
      } else {
        getCodeFlag.value = true
        codeNum.value = 60
        clearInterval(timer.value)
      }
    }, 1000)
  }
}

onMounted(() => {
  if (props.userAccount != '') {
    pwdForm.userAccount = props.userAccount
    pwdForm.userPwd = ''
  }
})
</script>
<style scoped lang="scss">
.demo-ruleForm {
  margin-top: 20px;

  @for $i from 1 through 5 {
    .login-animation#{$i} {
      opacity: 0;
      animation-name: error-num;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: calc($i/10) + s;
    }
  }
}
</style>
